<template>
  <el-dialog
    width="500px"
    title="扣除押金"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
  >
    <el-form :rules="rules" ref="ruleForm" :model="form" label-width="100px">
      <el-form-item label="可扣除押金：">
        <p>￥{{ depositNum }}</p>
      </el-form-item>
      <el-form-item prop="cusDeposit" label="扣除押金：">
        <el-input
          v-model="form.cusDeposit"
          placeholder="请输入扣除押金"
          type="number"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { deductDeposit, getSurplusDeposit } from "@/api/order";
export default {
  props: ["orderId"],
  data() {
    return {
      form: {
        cusDeposit: "",
      },
      depositNum: "",
      dialogVisible: false,
      rules: {
        cusDeposit: [
          { required: true, message: "请输入扣除押金", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    getSurplusDepositMethod() {
      getSurplusDeposit(this.orderId).then((res) => {
        console.log(res);
        this.depositNum = res.rest_amount || "";
      });
    },
    submit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (Number(this.depositNum) < Number(this.form.cusDeposit)) {
            this.$message({
              message: "扣款金额不能大于可扣除金额",
              type: "warning",
            });
            return;
          }
          deductDeposit({
            orderId: this.orderId,
            amount: this.form.cusDeposit,
          }).then((res) => {
            this.dialogVisible = false;
            this.$emit("getList", true);
          });
        } else {
          this.$message({
            message: "请检查表单错误",
            type: "error",
          });
          return false;
        }
      });
    },
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getSurplusDepositMethod();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
a,
a:focus,
a:hover {
  color: $mainBlue;
}
</style>
